<template>

  <div class="trade">


    <div style="margin-bottom: 20px">
    <el-button>发布新交易</el-button>
    <el-radio-group v-model="radio3" class="pull-right">
      <el-radio-button label="我需要买金币"></el-radio-button>
      <el-radio-button label="我需要卖金币"></el-radio-button>
    </el-radio-group>

    <el-select v-model="value" clearable  placeholder="筛选游戏" class="pull-right">
      <el-option
        v-for="item in options"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    </div>

    <el-table
      :data="tableData5"
      style="width: 100%">
      <el-table-column type="expand">
        <template scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="发布人">
              <span>{{ props.row.promulgator }}</span>
            </el-form-item>
            <el-form-item label="信用额度">
              <span>{{ props.row.deposit }}</span>
            </el-form-item>
            <el-form-item label="发布时间">
              <span>{{ props.row.time }}</span>
            </el-form-item>
            <el-form-item label="平均单价">
              <span>{{ props.row.price / props.row.num * 10000 }} 元/<small>亿金币</small></span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="游戏"
        prop="game">
      </el-table-column>
      <el-table-column
        label="进出货"
        prop="flow">
      </el-table-column>
      <el-table-column
        label="数量"
        prop="num">
      </el-table-column>
      <el-table-column
        label="价格"
        prop="price">
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleJieDan(scope.$index, scope.row.id)">立即交易
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pull-right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

  </div>

</template>


<script>
  export default {
    data () {
      return {
        radio3: [],
        currentPage4: 5,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: [],
        tableData5: [{
          id: '1',
          promulgator: '某某金币',
          deposit: '3000',
          game: '91y',
          flow: '进货',
          num: '30000',
          price: '15000',
          time: '2016-06-06 12:45',
          myself: false
        }, {
          id: '1',
          promulgator: '某某金币',
          deposit: '3000',
          game: '91y',
          flow: '进货',
          num: '30000',
          price: '15000',
          time: '2016-06-06 12:45',
          myself: false
        }, {
          id: '1',
          promulgator: '某某金币',
          deposit: '3000',
          game: '91y',
          flow: '进货',
          num: '30000',
          price: '15000',
          time: '2016-06-06 12:45',
          myself: false
        }, {
          id: '1',
          promulgator: '某某金币',
          deposit: '3200',
          game: '91y',
          flow: '进货',
          num: '30000',
          price: '15000',
          time: '2016-06-06 12:45',
          myself: false
        }, {
          id: '1',
          promulgator: '某某金币',
          deposit: '3000',
          game: '91y',
          flow: '进货',
          num: '30000',
          price: '15000',
          time: '2016-06-06 12:45',
          myself: false
        }]
      }
    },
    methods: {
      handleJieDan (index, row) {
        console.log(index, row)
      },
      handleSizeChange () {
      },
      handleCurrentChange () {
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand {
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
      label {
        width: 90px;
        color: #99a9bf;
      }
    }
  }

</style>
